<template>
	<div v-if="income" class="user_box">
		<div class="user_box-top">
			<!-- 头像 -->
			<div class="user-top">
				<!-- <img class="set" src="../../images/mine/icon_set.png" alt="" @click="goSetup">  -->
				<!-- 头像 -->
				<img class="user-head" v-if="avatar_url" :src="avatar_url" alt="" />
				<img class="user-head" v-else src="../../images/mine/head.png" alt="" />

				<!-- 信息 -->
				<div class="user-data">
					<div class="user-data-name">
						<div class="user-data-name_label">{{ income.nickname }}</div>
						<!-- <img v-if="income.level_icon" class="user-data-level" :src="income.level_icon" alt="" /> -->
					</div>
					<div class="user-data-invite">
						<i style="font-style: normal;" v-if="isShow">邀请码:{{ invite_code }}</i>
						<span @click="copyText" v-if="isShow">复制</span><span @click="isShow = !isShow">{{
							isShow ? "隐藏" : "显示邀请码"
						}}</span>
					</div>
				</div>
			</div>
		</div>

		<footTab :current="1" style="z-index: 9999;"></footTab>
	</div>
</template>

<script>
import {
	USERDETAIL
} from "@/api/mine";
import footTab from "@/components/foot-tab";
export default {
	components: {
		footTab
	},
	data() {
		return {
			nickname: "",
			avatar_url: "",
			invite_code: "",
			account: "",
			uid: '',
			isShow: true,
			income: null,
			view_agent_data: null
		};
	},
	activated() {
		// 当组件被激活时，重新加载数据
		// this.fetchData();
		document.title = '我的';
		this.getMine()

	},
	created() {
		// window.scrollTop(0, 0)

	},
	mounted() {
		// this.getMine()
	},
	methods: {
		getMine() {
			if (!this.isLogin()) {
				return;
			}

			this.$http.get('/store/manage/list')


			this.$http.get(USERDETAIL).then((res) => {
				this.income = res.data;
				this.invite_code = res.data.invite_code;
				this.nickname = res.data.nickname;
				this.uid = res.data.uid;
				this.avatar_url = res.data.avatar_url;
				this.account = res.data.account;
				this.view_agent_data = res.data.view_agent_data
			});
			// window.scrollTo(0, 0)
			localStorage.removeItem('profit')
		},
		// 是否登录
		isLogin() {
			const token = localStorage.getItem("token");
			if (!token) {
				this.$router.push({
					name: "login",
				});
				return false;
			}

			return true;
		},
		// 复制文本
		copyText(text) {
			// 创建一个临时的输入元素
			const input = document.createElement('input');
			input.value = this.invite_code;
			document.body.appendChild(input);
			// 选择输入框中的文本
			input.select();
			input.setSelectionRange(0, 99999); // 对于移动设备

			// 执行复制命令
			document.execCommand('copy');

			// 移除临时输入框
			document.body.removeChild(input);
			this.$toast("复制成功")
		},

	},

};
</script>

<style lang="scss" scoped>
.user_box {
	min-height: calc(100vh - 46px);
	background-color: #f5f5f5;
	padding-bottom: calc(1.3rem + constant(safe-area-inset-bottom));
	padding-bottom: calc(1.3rem + env(safe-area-inset-bottom));
}

.user_box-top {
	background-color: #FFFFFF;
}

.user-top {
	background: url("../../images/mine/img_beij.png") no-repeat center;
	background-size: cover;
	height: 4.6rem;
	padding: 0.4rem;
	padding-top: .8rem;
	display: flex;
	flex-wrap: nowrap;
	color: #fff;
	box-sizing: border-box;

	.set {
		position: absolute;
		right: 0.4rem;
		top: 0.4rem;
		width: .48rem;
		height: .48rem;
	}

	.user-head {
		width: 1.08rem;
		height: 1.08rem;
		border-radius: 50%;
		margin-top: 0.16rem;
		margin-left: 0.12rem;
	}

	.user-data {
		margin-left: 0.24rem;
		line-height: 0.5rem;
		margin-top: 0.16rem;

		.user-data-name {
			display: flex;
			font-family: PingFangSC, PingFang SC;
			font-weight: 600;
			font-size: 0.36rem;
			color: #ffffff;
			line-height: .5rem;
			text-align: left;
			font-style: normal;

			// display: flex;
			&_label {
				max-width: 3rem;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
				margin-top: 0.04rem;
			}

			.user-data-level {
				width: 1.3rem;
				// margin-top:.2rem;
				vertical-align: middle;
				// padding: 0.04rem 0.2rem;
				font-size: 0.28rem;
				font-weight: 500;
				border-radius: 0.05rem;
				margin-left: 0.15rem;
			}
		}

		.user-data-invite {
			font-size: 0.24rem;
			// margin-top: 0.2rem;

			// margin-right: 0.1rem;

			span {
				padding: 0.03rem 0.04rem;
				font-size: 0.24rem;
				opacity: 0.6;
				border-radius: 0.05rem;
				margin-left: 0.1rem;
				text-decoration-line: underline;
				color: #fff;
			}
		}
	}

	// .van-icon {

	// }
	.user-set {
		position: absolute;
		right: 0.4rem;
		top: 0.4rem;
		width: 0.48rem;
		height: 0.48rem;
		margin-top: -0.1rem;
		margin-right: -0.1rem;
	}
}
</style>
